<template>
  <div>
    <!-- 弹框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :before-close="close"
      class="dialog"
    >
      <el-form :model="form" :rules="rules" ref="form" :inline="true">
        <el-form-item label="模型名称" prop="model" :label-width="formLabelWidth">
          <el-input size="small" v-model="form.model"></el-input>
        </el-form-item>
        <br />
        <el-form-item label="AI类型" prop="contentType" :label-width="formLabelWidth">
          <el-select v-model="form.contentType">
            <el-option
              v-for="(item, index) in contentTypeOptions"
              :key="index"
              :label="item.name"
              :value="item.value"
            >
              <span>{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模型描述" prop="modelDesc" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="form.modelDesc"
            autocomplete="off"
            :rows="4"
            :autosize="{ minRows: 2, maxRows: 4 }"
            style="width: 500px"
          ></el-input>
        </el-form-item>
        <el-form-item label="限流规则" prop="limitRule" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="form.limitRule"
            autocomplete="off"
            :rows="4"
            :autosize="{ minRows: 4, maxRows: 8 }"
            style="width: 500px"
          ></el-input>
        </el-form-item>
        <el-form-item label="apikey" prop="apikeyId" :label-width="formLabelWidth">
          <el-select v-model="form.apikeyId" placeholder="请选择活动区域">
            <el-option
              v-for="i in apiKeyData"
              :label="i.apiKey"
              :value="i.id"
              :key="i.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="历史缓存" prop="gender" :label-width="formLabelWidth">
          <el-switch
            v-model="form.isCache"
            :active-value="1"
            :inactive-value="2"
            active-text="开启"
            inactive-text="关闭"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="当天限流数" prop="limitNum" :label-width="formLabelWidth">
          <el-input
            size="small"
            type="number"
            min="1"
            v-model.number="form.limitNum"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addChatModel } from "@/services/chatModel";
import { getChatApiKeyList } from "@/services/chatApiKey";
export default {
  name: "AiModelAdd",
  props: ["dialogTitle", "dialogAddVisible"],
  watch: {
    // 监听 prop 的变化，更新子组件内部的属性
    dialogAddVisible(newValue) {
      this.dialogVisible = newValue;
      if (newValue) {
        this.getChatApiKeyList();
      }
    },
  },
  data() {
    return {
      formLabelWidth: "150px",
      form: {
        contentType: 0,
        model: "",
        modelDesc: "",
        limitRule: "",
        isCache: 2,
        limitNum: 1,
      },
      apiKeyData: [],
      contentTypeOptions: [
        {
          name: "通义千问",
          value: 0,
        },
        {
          name: "通义万象",
          value: 1,
        },
      ],
      dialogVisible: false,
      rules: {
        model: [
          { required: true, message: "请填写模型名称", trigger: "blur" },
          {
            min: 3,
            max: 100,
            message: "长度在 3 到 100个字符",
            trigger: "blur",
          },
        ],
        contentType: [{ required: true, message: "请选择模型类型", trigger: "blur" }],
        limitNum: [
          { required: true, message: "限流数不为空", trigger: "blur" },
          {
            type: "number",
            min: 1,
            message: "最小限流数为1",
            trigger: "blur",
          },
        ],
        apikeyId: [{ required: true, message: "apiKey不为空", trigger: "blur" }],
      },
    };
  },

  mounted() {
    this.getChatApiKeyList();
  },

  methods: {
    getChatApiKeyList() {
      getChatApiKeyList(1)
        .then((res) => {
          this.apiKeyData = res.data;
        })
        .catch((err) => {});
    },
    close() {
      this.dialogVisible = false;
      this.$emit("dialog-addvisible-change", false);
      this.clearFrom();
    },
    clearFrom() {
      this.form = {
        contentType: 0,
        model: "",
        modelDesc: "",
        limitRule: "",
        isCache: "",
        limitNum: "",
      };
    },
    add() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addChatModel(this.form)
            .then((res) => {
              this.$emit("ai-model-add", true);
              this.$emit("dialog-addvisible-change", false);
              this.dialogVisible = false;
              this.clearFrom();
            })
            .catch((err) => {});
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
